<template>
    <div class="tableWarp" ref="tablewarp">
        <el-table border :data="data.rows" :max-height="maxHeight" @selection-change="changeSelect">
            <el-table-column type="selection" width="55" v-if="multiSelect">
            </el-table-column>
            <el-table-column v-for="(colKey, index) in data.columnKeys" :key="colKey" :prop="colKey"
                :label="data.columnNames[index]">
                <template slot-scope="scope">
                    <el-image v-if="colKey.indexOf('img') == 0 && scope.row[colKey]" :preview-src-list="[scope.row[colKey]]" :src="scope.row[colKey]" fit="contain" style="max-width:80px;"></el-image>
                    <span v-else>
                        {{scope.row[colKey]}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <slot :row="scope.row"></slot>
                </template>

            </el-table-column>

        </el-table>
        <el-pagination class="tablePaging" @size-change="changeSize" @current-change="changePage" :current-page="curPage"
            :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    props: {
        multiSelect: {
            type: Boolean,
            default: true
        },
        data: {
            type: Object,
            default: () => {
                return {
                    rows: [],
                    columnNames: [],
                    columnKeys: []
                }
            }
        },
        curPage: {
            type: Number,
            default: 1
        },
        total: {
            type: Number,
            default: 0
        },
        pageSizes: {
            type: Array,
            default: () => {
                return [20, 30, 40, 50, 100]
            }
        },
        pageSize: {
            type: Number,
            default: 20
        }
    },
    data() {
        return {
            maxHeight: "680px"
        }
    },
    mounted() {
        //减去查询区域的高度
        if (this.$refs.tablewarp.parentNode && this.$parent.$el.getElementsByClassName("searchWarp")[0]) {
            this.maxHeight = (this.$refs.tablewarp.parentNode.getBoundingClientRect().height - this.$parent.$el.getElementsByClassName("searchWarp")[0].getBoundingClientRect().height - 100);
        }
        
    },
    methods: {
        changeSize(size) {
            this.$emit("changeSize", size);
        },
        changePage(page) {
            this.$emit("changePage", page);
        },
        changeSelect(rows) {
            this.$emit("changeSelect", rows)
        }
    }
}
</script>

<style lang="scss" scoped></style>